<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>015_滚轮</title>
    <style type="text/css">
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body style="height: 2000px">
    <div id="box1"></div>
<script type="text/javascript">

    /**
     * 当鼠标的滚轮向下滚动时，box1变长，当鼠标滚轮向上滚动时，box1变短
     *
     * onmousewheel是鼠标滚轮滚动的事件，会在滚轮滚动的时候触发该事件，但是火狐浏览器不支持这个属性。
     * 在火狐浏览器中需要使用DOMMouseScroll来绑定滚动事件，注意该事件需要通过addEventLister()函数来绑定
     *
     */
    var box1 = document.getElementById("box1");
    box1.onmousewheel = function (event) {
        if(!event) {
            event = window.event;
        }
        /**
         * event.wheelDelta 可以获取鼠标滚轮滚动的方向，该值我们一般只看正负（正值-向上滚动，负值-向下滚动）
         * wheelDelta 火狐中不支持这个属性
         * event.detail 在火狐中使用该属性获取鼠标滚动的方向，该值我们一般只看正负（正值-向下滚，负值-向上滚）
         *
         */
        if(event.wheelDelta > 0 || event.detail < 0) { // 所有浏览器的鼠标滚轮向上滚动
            box1.style.height = box1.clientHeight - 10 + "px";
        } else { // 所有浏览器的滚轮向下滚动
            box1.style.height = box1.clientHeight + 10 + "px";
        }
        /**
         * 当滚轮滚动时，如果浏览器有滚动条，该滚动条会随之滚动，这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
         *
         * return false;
         *
         * 当使用addEventListener()方法绑定响应函数，取消默认行为不能使用return false，而是需要使用：
         * event.preventDefault()
         *
         * 但是IE8不支持event.preventDefault()，而且浏览器会报错
         */

        if(event.preventDefault) {
            event.preventDefault();
        }
        return false;

    };

    bind(box1, 'DOMMouseScroll', box1.onmousewheel);

    function bind(obj, eventStr, callback) {
        if(obj.addEventListener) {
            obj.addEventListener(eventStr, callback, false);
        } else {
            obj.attachEvent("on"+eventStr, function () {
                callback.call(obj);
            });
        }
    }
</script>
</body>
</html>